<!--
 * @Description: 
 * @Author: chendingfengmail@163.com
 * @Date: 2021-10-28 18:58:40
 * @LastEditTime: 2022-01-24 15:35:33
 * @LastEditors: chendingfengmail@163.com
 * @Reference: 
-->
<!-- 首页 -->
<template>
  <div class="card-list-test">
    <dd-card>
      <!--
      <span ref="home" :style="{height: `${tableHeight}px`}">欢迎使用快速开发平台</span>
      -->
      <div ref="clients" class="clients" :style="{height: `${containerHeight}px`}">
        <div class="item" v-for="(item, index) in systems" :key="index" @click="clickItem(item)">
          <img :src="item.icon" alt="" class="icon">
          <label>{{ item.name }}</label>
        </div>
      </div>
    </dd-card>
    <!-- 以下为组件使用demon，打开注释即可
    <el-divider content-position="left">地图组件</el-divider>
    <el-button type="info" @click="openMapLocationDialog">地图点位点选</el-button>
    <el-button type="info" @click="openMapAreaDialog">地图区域点选</el-button>
    <el-divider content-position="left">卡片组件</el-divider>
    <el-row :gutter="20">
      <el-col :span="6" :lg="4" :xs="8" :xl="3" v-for="cardRes in cardListData" :key="cardRes.id" class="el-col">
        <dd-card :title="`测试卡片${cardRes.id}`" :subtitle="'subtitle'"> 卡片组件 </dd-card>
      </el-col>
    </el-row>
    <el-divider content-position="left">上传组件</el-divider>
    <el-row>
      <dd-file-upload
        :fileList="imageList"
        :uploadRequest="uploadImage"
        :onRemoveFile="handleRemoveFile"
        :fileLimit="1"
        :isPreview="imagesPreview"
      ></dd-file-upload>
    </el-row>

    <el-divider content-position="left">弹窗视图</el-divider>
    <el-button type="info" @click="openDialog('add')">弹窗视图</el-button>
    <ViewHandleDialog
      :visible.sync="viewHandleDialogVisible"
      :modelType="modelType"
      :modelData="modelData">
    </ViewHandleDialog>
    <MapLocationDialog :visible.sync="mapLocationDialogVisible"></MapLocationDialog>
    <MapAreaDialog :visible.sync="mapAreaDialogVisible"></MapAreaDialog>
    -->
  </div>
</template>

<script>
import MapLocationDialog from './dialog/mapLocationDialog.vue';
import MapAreaDialog from './dialog/mapAreaDialog.vue';
import ViewHandleDialog from './dialog/viewHandleDialog.vue';
import DdContainerCard from '../../components/dd-container/components/dd-container-card.vue';
import util from '@/libs/util.js';

export default {
  name: 'home',
  components: {
    MapLocationDialog,
    MapAreaDialog,
    ViewHandleDialog,
    DdContainerCard,
  },
  data() {
    return {
      cardListData: [{ id: 0 }, { id: 1 }, { id: 2 }],

      mapLocationDialogVisible: false,
      mapAreaDialogVisible: false,

      imageList: [],
      imagesPreview: false,

      viewHandleDialogVisible: false,
      modelData: {},
      modelType: 'info',
      tableHeight: 500,
      containerHeight: 500,
      searchForm: {
        pageIndex: 1,
        pageSize: 1000,
        enable: 1,
      },
      systems: []
    };
  },
  computed: {},

  mounted() {
    this.$nextTick(() => {
      this.getHeight()
      this.initApps()
    });

  },

  methods: {
    getHeight(e) {
      this.containerHeight = window.innerHeight - this.$refs.clients.offsetTop - 163
      window.onresize = () => {
        this.containerHeight = window.innerHeight - this.$refs.clients.offsetTop - 163
      }
      e => e.preventDefault()
    },
    initApps(e) {
      let _this = this;
      this.$api.clientApp
        .findList(this.searchForm)
        .then((res) => {
          _this.systems = res.value;
        })
        .catch((error) => {
          console.log(error);
        });
      e => e.preventDefault()
    },
    async clickItem(item){
      // /auth/oauth/oauth2approve?oauth_approval=token&client_id=XX
      const token = util.cookies.get('token')
      if (token != undefined) {
        let url = window.location.origin + '/auth/oauth/oauth2approve?oauth_approval='+token+'&client_id=' + item.clientId;
        window.open(url, '_blank');
        console.log('open url:', url); 
      }
    },
    openMapLocationDialog() {
      this.mapLocationDialogVisible = true;
    },
    openMapAreaDialog() {
      this.mapAreaDialogVisible = true;
    },
    // 上传图片
    uploadImage(upFormData) {
      let _this = this;
      return new Promise((resolve, reject) => {
        this.$api.file
          .fileUpload(upFormData)
          .then((res) => {
            _this.modelData.imageField = res.value;
            resolve(res);
          })
          .catch((error) => {
            reject(error);
            console.log(error);
          });
      });
    },

    // 图片删除回调函数
    handleRemoveFile(file, pictureList) {
      console.log('file', file);
      console.log('pictureList', pictureList);
    },

    // 打开 添加|编辑|详情 对话框
    async openDialog(modelType, modelData) {
      this.modelType = modelType;
      this.modelData = modelType === 'add' ? this.$options.data().modelData : JSON.parse(JSON.stringify(modelData));
      this.viewHandleDialogVisible = true;
    },
  },
};
</script>

<style lang='scss' scoped>
.card-list-test{
  width: 100%;
  height: 100%;
  text-align: center;
  span{
    display: block;
    font-size: 30px;
    margin-top: 100px;
  }
  .clients{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow:auto;
    .item {
      width: 150px;
      height: 150px;
      margin: 10px 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      img{
        width: 70%;
        height: 70%;
      }
      label{
        font-size: 12px;
      }
    }
  }
}
.el-col {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}
</style>